var foucsImg = document.querySelectorAll('.foucs-slide a');
var foucsDot = document.querySelectorAll('.foucs-dot li');
var foucsLeft = document.getElementById('foucs-left');
var foucsRight = document.getElementById('foucs-right');
var foucsI = document.querySelectorAll('.foucs-dot li i');
var foucs = document.getElementById('foucs');

var foucsIndex = 0;
var foucsTimer = null;  //定时器

// 移除active样式
function removeFoucs() {
    foucsImg.forEach(item => {
        item.classList.remove('foucs-active');
    })
    foucsDot.forEach(item => {
        item.classList.remove('foucs-active');
    })
    foucsI.forEach(item => {
        item.classList.remove('foucs-def');
    })
}

// 切换
function changeFoucs(index) {
    removeFoucs();
    foucsImg[index].classList.add('foucs-active');
    foucsDot[index].classList.add('foucs-active');
    foucsI[index].classList.add('foucs-def');
}

function autoFoucs() {
    foucsTimer=setInterval(function(){
        changeFoucs(foucsIndex);
        foucsIndex++;
        if (foucsIndex > foucsDot.length - 1) {
            foucsIndex = 0;
        }
    },2000)
   

}

// 遍历绑定鼠标事件
foucsDot.forEach((item, index) => {
    // 鼠标移入事件
    item.addEventListener('mouseenter', function () {
        foucsIndex = index;
        changeFoucs(index);
        clearInterval(foucsTimer);
    })
    // 鼠标移出事件
    item.addEventListener('mouseleave', function () {
        autoFoucs();
        if (foucsIndex > foucsDot.length - 1) {
            foucsIndex = 0;
            changeFoucs(foucsIndex);
        }
    })
})

foucs.addEventListener('mouseenter',function(){
    foucsLeft.style.display = 'block';
    foucsRight.style.display = 'block';
    clearInterval(foucsTimer);
})
foucs.addEventListener('mouseleave',function(){
    foucsLeft.style.display = 'none';
    foucsRight.style.display = 'none';
    autoFoucs();
})


foucsRight.addEventListener('click', function () {
    changeFoucs(foucsIndex);
    foucsIndex++;
    if (foucsIndex > foucsDot.length - 1) {
        foucsIndex = 0;
    }
   
})
foucsLeft.addEventListener('click', function () {
   
    foucsIndex--;
    if (foucsIndex <0 ) {
        foucsIndex = foucsDot.length - 1;
    }
    changeFoucs(foucsIndex);
   
})

//初始化自动播放
autoFoucs();